<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <base th:href="${#servletContext.getContextPath()+'/'}">

  <link rel="stylesheet" type="text/css" href="bootstrap-3.4.1/dist/css/bootstrap.css">
  <script type="text/javascript" src="jquery/jquery-3.6.1.min.js"></script>
  <script type="text/javascript" src="jquery/http.js"></script>

  <script type="text/javascript">
    function deleteSysUser(id) {
      console.log("异步删除:", id)
    }

    $(function () {
      $("#sysUserCheckFlag").change(function () {
        // 1.获取当前的状态值
        var val = $(this).prop("checked");
        console.log(val);

        // 2.获取需要被选中的元素
        $(".sysUserCheck").each(function () {
          $(this).prop("checked", val);
        })
      });

      $("#sysUserBatchDel").click(function () {
        var array = new Array();
        // 获取用户勾选的数据
        $(".sysUserCheck:checked").each(function () {
          // 把数组放到数组中
          array.push($(this).val());
        })

        sendRequest("SystemUserServlet/batchDel", array, function (data) {
          if (data.code == 200) {
            location.reload();
          }
        });

      });
    })
  </script>
</head>
<body>

<a href="/PageServlet/system/sysUser/sysUserAdd.html">添加</a>
<button class="button btn-danger" id="sysUserBatchDel">批量删除</button>
<table class="table">
  <tr>
    <th>
      <input type="checkbox" id="sysUserCheckFlag">
    </th>
    <th>id</th>
    <th>username</th>
    <th>sex</th>
    <th>email</th>
    <th>birthday</th>
    <th>操作</th>
  </tr>

  <tr th:each="sysUser:${sysUserList}">
    <td>
      <input class="sysUserCheck" type="checkbox" th:value="${sysUser.id}">
    </td>
    <td th:text="${sysUser.id}"/>
    <td th:text="${sysUser.username}"/>
    <td th:text="${sysUser.sex == 1?'男':'女'}"/>
    <td th:text="${sysUser.email}"/>
    <td th:text="${#dates.format(sysUser.birthday,'yyyy-MM-dd')}"/>
    <td>
      <a th:href="|SystemUserServlet/systemUserById?id=${sysUser.id}|">编辑</a>
      <a href="javascript:void(0)" th:onclick="|deleteSysUser(${sysUser.id})|">删除</a>
    </td>
  </tr>
</table>

</body>
</html>